<template>
  <view id="chatSearchbox">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">

      </view>
      <view class="top-search">
        <view class="tinputbox">
          <view>
            <image src="../../static/message/search.png" mode="" style="width: 30rpx;height: 30rpx;padding-top: 20rpx;">
            </image>
          </view>
          <view class="input">
            <input type="text" placeholder="请输入内容">
          </view>
        </view>
        <view class="tstit">
          取消
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- 内容 -->
    <view class="content">
      <!-- 联系人 -->
      <view class="linkman">
        <view class="lmtop">
          <view class="lmtoptit">
            联系人
          </view>
          <view class="lmtopright">
            <view>
              <image src="../../static/message/blue-search.png" mode=""
                style="width: 30rpx;height: 30rpx;padding-top: 6rpx;padding-right: 10rpx;"></image>
            </view>
            <view class="lmtoprighttit">
              更多联系人
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/user_three.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <view class="man" style="background-color: #FF4D94;">
              <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
            </view>
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              隔壁小美
            </view>
            <view class="item1cont">
              昵称：美女<span style="color: #FF464C;">你</span>烦恼
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/user_four.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <view class="man" style="background-color: #769AFF;">
              <image src="../../static/message/man.png" mode="" style="width: 65%;height: 68%;"></image>
            </view>
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              老王天下第一
            </view>
            <view class="item1cont">
              昵称：飞翔的<span style="color: #FF464C;">你</span>
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/two.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <view class="man" style="background-color: #FF4D94;">
              <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
            </view>
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              富士康~<span style="color: #FF464C;">你</span>李姐
            </view>
            <view class="item1cont">
              昵称：富士康<span style="color: #FF464C;">你</span>李姐
            </view>
          </view>
        </view>
      </view>
      <!-- 联系人 -->

      <!-- 社群 -->
      <view class="linkman">
        <view class="lmtop">
          <view class="lmtoptit">
            社群
          </view>
          <view class="lmtopright">
            <view>
              <image src="../../static/message/blue-search.png" mode=""
                style="width: 30rpx;height: 30rpx;padding-top: 6rpx;padding-right: 10rpx;"></image>
            </view>
            <view class="lmtoprighttit">
              更多社群
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/five_friend.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <!-- <view class="man" style="background-color: #FF4D94;">
              <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
            </view> -->
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              小王、小李、老赵、阿芳、宋姐（5）
            </view>
            <view class="item1cont">
              包含：小王（<span style="color: #FF464C;">你</span>的名字）
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/nine_friend.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <!-- <view class="man" style="background-color: #769AFF;">
              <image src="../../static/message/man.png" mode="" style="width: 65%;height: 68%;"></image>
            </view> -->
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              2022拼多多拼单互助万人群（6587）
            </view>
            <view class="item1cont">
              昵称：飞翔的<span style="color: #FF464C;">你</span>
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/nine_friend.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <!-- <view class="man" style="background-color: #FF4D94;">
              <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
            </view> -->
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              富士康~老哥<span style="color: #FF464C;">你</span>螺丝帮（64）
            </view>
            <view class="item1cont">
              昵称：富士康<span style="color: #FF464C;">你</span>李姐
            </view>
          </view>
        </view>
      </view>
      <!-- 社群 -->

      <!-- 聊天记录 -->
      <view class="linkman">
        <view class="lmtop">
          <view class="lmtoptit">
            聊天记录
          </view>
          <view class="lmtopright">
            <view>
              <image src="../../static/message/blue-search.png" mode=""
                style="width: 30rpx;height: 30rpx;padding-top: 6rpx;padding-right: 10rpx;"></image>
            </view>
            <view class="lmtoprighttit">
              更多聊天记录
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/five_friend.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <!-- <view class="man" style="background-color: #FF4D94;">
              <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
            </view> -->
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              小王、小李、老赵、阿芳、宋姐（5）
            </view>
            <view class="item1cont">
              1232条相关的聊天记录
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/nine_friend.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <!-- <view class="man" style="background-color: #769AFF;">
              <image src="../../static/message/man.png" mode="" style="width: 65%;height: 68%;"></image>
            </view> -->
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              2022拼多多拼单互助万人群（6587）
            </view>
            <view class="item1cont">
              1232条相关的聊天记录
            </view>
          </view>
        </view>

        <view class="messitem1">
          <view class="item1right">
            <image src="../../static/message/nine_friend.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
            <!-- <view class="man" style="background-color: #FF4D94;">
              <image src="../../static/message/woman.png" mode="" style="width: 65%;height: 68%;"></image>
            </view> -->
          </view>
          <view class="item1text">
            <view class="item1name" style="color: #343434;">
              富士康~老哥
            </view>
            <view class="item1cont">
              12条相关的聊天记录
            </view>
          </view>
        </view>
      </view>
      <!-- 聊天记录 -->
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  #chatSearchbox {
    width: 100vw;

    // 头部
    .topbox {
      width: 100vw;

      .top-top {
        width: 100vw;
        height: var(--status-bar-height);
      }

      .top-search {
        width: 100%;
        height: 100rpx;
        background-color: white;
        padding: 15rpx 40rpx;
        box-sizing: border-box;
        display: flex;

        .tinputbox {
          width: 83%;
          height: 72rpx;
          border-radius: 50rpx;
          background-color: #F0F0F0;
          box-sizing: border-box;
          padding-left: 30rpx;
          display: flex;

          .input {
            padding-top: 13rpx;
            padding-left: 10rpx;
          }
        }

        .tstit {
          text-align: center;
          width: 18%;
          height: 100%;
          line-height: 70rpx;
          color: #B5B5B5;
          font-size: 34rpx;
        }
      }

    }

    // 头部
    // 内容
    .content {
      width: 100vw;
      background-color: #F5F5F5;

      // 联系人
      .linkman {
        margin-bottom: 20rpx;
        background-color: white;
        width: 100vw;
        border-top: solid 2rpx #F0F0F0;

        .lmtop {
          box-sizing: border-box;
          width: 90%;
          margin: auto;
          height: 80rpx;
          padding: 18rpx 10rpx;
          border-bottom: solid 2rpx #E5E5E5;
          display: flex;
          justify-content: space-between;

          .lmtoptit {
            color: #6F6F6F;
          }

          .lmtopright {
            display: flex;

            .lmtoprighttit {
              color: #169FFA;
            }
          }
        }

        .messitem1 {
          width: 100%;
          height: 128rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          display: flex;
          position: relative;

          .top {
            z-index: 8;
            position: absolute;
            top: 80rpx;
            left: 350rpx;
            background-color: #F5F5F5;
            width: 260rpx;
            height: 172rpx;
            border-radius: 10rpx;


            .top1 {
              text-align: center;
              font-size: 32rpx;
              padding: 16rpx 50rpx;
              box-sizing: border-box;
              width: 100%;
              height: 50%;
              border-bottom: solid #E5E5E5 4rpx;
            }

            .top2 {
              text-align: center;
              font-size: 32rpx;
              padding: 16rpx 50rpx;
              box-sizing: border-box;
              width: 100%;
              height: 50%;

            }
          }

          .item1right {
            width: 14%;
            position: relative;

            .man {
              border-radius: 50%;
              position: absolute;
              bottom: 0rpx;
              left: -15rpx;
              box-sizing: border-box;
              text-align: center;
              line-height: 25rpx;
              width: 25rpx;
              height: 25rpx;
              background-color: #769AFF;
            }

            .badge {
              position: absolute;
              top: -10rpx;
              right: -15rpx;
            }
          }

          .item1text {
            height: 100%;
            padding-bottom: 16rpx;
            margin-left: 10rpx;
            width: 82%;
            border-bottom: solid #F1F1F1 2rpx;

            .item1name {
              font-size: 30rpx;
              font-weight: bold;
              color: #0799FA;
            }

            .item1cont {
              color: #A1A1A1;
              margin-top: 3rpx;
              width: 90%;
              /*强制文本在一行内显示*/
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

          }

          .item1time {
            width: 20%;
            text-align: right;
          }

          .timeimg {
            padding-right: 20rpx;
            padding-top: 20rpx;
          }

        }
      }

      // 联系人
    }

    // 内容
  }
</style>